<template>
  <div class="">
    <div @click="toDrag" class="link">测试拖拽</div>
    <div @click="toDrag2" class="link">测试拖拽2</div>
    <div @click="toDrag3" class="link">测试拖拽3</div>
    <div @click="toDrag4" class="link">测试拖拽4</div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";

const router = useRouter();
const toDrag = () => {
  router.push("/drag");
};
const toDrag2 = () => {
  router.push("/drag2");
};

const toDrag3 = () => {
  router.push("/drag3");
};

const toDrag4 = () => {
  router.push("/drag4");
};
</script>

<style lang="scss" scoped>
.link {
  font-size: 20px;
  color: #000;
  cursor: pointer;
  border-bottom: 1px solid #000;
  padding: 10px 0;
}
.link:hover {
  color: #409eff;
  text-decoration: underline;
}
</style>
